<template>
  <div class="sousuoTop">
    <div class="txt">
      <div class="img"></div>
      <input type="text" placeholder='国内秋色盘点大全' class="contain" maxlength='10' v-model='txt'>
      <div class="img2" v-if="txt" @click="emptyfun"></div>
    </div>
    <div class='cancel' @click="cancelfun">取消</div>
  </div>
</template>
<script>
export default {
  name: 'SousuoTop',
  data () {
    return {
      txt: ''
    }
  },
  methods: {
    emptyfun () {
      this.txt = ''
    },
    cancelfun () {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>
<style scoped lang='less'>
.sousuoTop{
  width: 100%;
  height: 52px;
  line-height:52px;
  box-sizing:border-box;
  background-color: #f4f4f4;
  padding:0 15px;
  display: flex;
  justify-content:space-between;
  .txt{
    width: 300px;
    height: 30px;
    line-height: 30px;
    margin: 11px 0;
    display: flex;
    border-radius:20px;
    border:1px solid #dddddd;
    background-color: #fff;
    .img,.img2{
      width: 15px;
      height: 15px;
      margin: 7.5px 0px;
      background-image: url(/static/Sousuo/wenhao.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .img{
      margin: 7.5px 0 7.5px 10px;
    }
    .contain{
      padding-left:10px;
      border:none;
      outline:none;
    }
    .img2{
      background-image: url(/static/Sousuo/chahao.png);
      margin-left:60px;
    }
  }
  .cancel{
    font-size:18px;
  }
}
</style>
